<template>
  <div class="dashboard-container">
    <div class="header">
      <div class="header-content">
        <div class="user-section">
          <h1>欢迎回来，{{ userStore.userInfo?.username }}！</h1>
          <p class="date">{{ currentDate }}</p>
        </div>
        <div class="user-avatar">
          <el-avatar :size="64" :src="getAvatarUrl(userStore.userInfo?.avatar)">
            <el-icon><UserFilled /></el-icon>
          </el-avatar>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- 快捷操作 -->
      <div class="quick-actions">
        <el-card class="action-card">
          <div class="action-item" @click="goToProfile">
            <div class="action-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="action-text">
              <h3>个人中心</h3>
              <p>查看和编辑个人信息</p>
            </div>
          </div>
        </el-card>

        <!-- 管理员权限的管理后台入口 -->
        <el-card v-if="userStore.userInfo?.role === 0" class="action-card admin-card">
          <div class="action-item" @click="goToAdmin">
            <div class="action-icon admin">
              <el-icon><Setting /></el-icon>
            </div>
            <div class="action-text">
              <h3>管理后台</h3>
              <p>用户管理、系统设置</p>
            </div>
          </div>
        </el-card>

        <el-card class="action-card">
          <div class="action-item" @click="showAbout">
            <div class="action-icon">
              <el-icon><InfoFilled /></el-icon>
            </div>
            <div class="action-text">
              <h3>关于系统</h3>
              <p>查看系统信息和帮助</p>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 个人信息卡片 -->
      <div class="info-section">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
              <el-button type="primary" size="small" @click="goToProfile">
                编辑
              </el-button>
            </div>
          </template>
          
          <div class="info-grid">
            <div class="info-item">
              <label>用户名：</label>
              <span>{{ userStore.userInfo?.username || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>邮箱：</label>
              <span>{{ userStore.userInfo?.email || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>手机号：</label>
              <span>{{ userStore.userInfo?.phone || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>角色：</label>
              <span>{{ getRoleText(userStore.userInfo?.role) }}</span>
            </div>
            <div class="info-item">
              <label>注册时间：</label>
              <span>{{ formatDate(userStore.userInfo?.createdAt) }}</span>
            </div>
            <div class="info-item">
              <label>状态：</label>
              <el-tag :type="userStore.userInfo?.status === 1 ? 'success' : 'danger'">
                {{ userStore.userInfo?.status === 1 ? '正常' : '禁用' }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { UserFilled, User, Setting, InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 当前日期
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 获取头像URL
const getAvatarUrl = (avatar) => {
  if (!avatar) return ''
  if (avatar.startsWith('http')) return avatar
  return `/api${avatar}`
}

// 获取角色文本
const getRoleText = (role) => {
  return role === 0 ? '管理员' : '普通用户'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知'
  return new Date(dateString).toLocaleString('zh-CN')
}

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile')
}

// 跳转到管理后台
const goToAdmin = () => {
  router.push('/admin')
}

// 显示关于信息
const showAbout = () => {
  ElMessage.info('Bears Admin v1.0.0 - 基于 Vue3 + SpringBoot 的管理系统')
}

// 获取用户信息
onMounted(async () => {
  if (!userStore.userInfo) {
    await userStore.getCurrentUser()
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  
  .header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px 24px;
    
    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .user-section {
        color: white;
        
        h1 {
          font-size: 32px;
          margin: 0 0 8px 0;
          font-weight: 600;
        }
        
        .date {
          font-size: 16px;
          opacity: 0.9;
          margin: 0;
        }
      }
      
      .user-avatar {
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        padding: 4px;
      }
    }
  }
  
  .content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
    
    .quick-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
      
      .action-card {
        border-radius: 12px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        border: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }
        
        &.admin-card {
          background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
          
          .action-icon.admin {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          }
        }
        
        .action-item {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 8px;
          
          .action-icon {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
          }
          
          .action-text {
            flex: 1;
            
            h3 {
              margin: 0 0 4px 0;
              font-size: 18px;
              color: #303133;
            }
            
            p {
              margin: 0;
              color: #606266;
              font-size: 14px;
            }
          }
        }
      }
    }
    
    .info-section {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        color: #303133;
      }
      
      .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
        
        .info-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          label {
            font-weight: 500;
            color: #606266;
            min-width: 80px;
          }
          
          span {
            color: #303133;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-container {
    .header {
      padding: 24px 16px;
      
      .header-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        
        .user-section h1 {
          font-size: 24px;
        }
      }
    }
    
    .content {
      padding: 24px 16px;
      
      .quick-actions {
        grid-template-columns: 1fr;
      }
      
      .info-grid {
        grid-template-columns: 1fr !important;
      }
    }
  }
}
</style> 